<template>
  <div class="test01-container">
    <h1>Test01 页面</h1>
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)

onMounted(() => {
  const chart = echarts.init(chartRef.value)
  const option = {
    backgroundColor: '#2c343c',
    title: {
      text: '交通流量统计',
      left: 'center',
      top: 20,
      textStyle: {
        color: '#ccc'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['旺峪路', '万盛街', '观枫街', '华池街', '思安街'],
      axisLine: {
        lineStyle: {
          color: 'white'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'white'
        }
      },
      splitLine: {
        show: false
      }
    },
    series: [{
      name: '流量',
      type: 'bar',
      barWidth: '60%',
      data: [25, 20, 18, 15, 12],
      itemStyle: {
        barBorderRadius: 5,
        color: (params) => {
          const gradientColors = [
            ['#f54d4f', '#ff8c37'], // Gradient for 旺峪路
            ['#ffec3d', '#ffaf34'], // Gradient for 万盛街
            ['#40a9ff', '#5cdbd3'], // Gradient for 观枫街
            ['#73d13d', '#a0d911'], // Gradient for 华池街
            ['#9254de', '#722ed1']  // Gradient for 思安街
          ]
          return new echarts.graphic.LinearGradient(
            0, 0, 1, 0, [
              { offset: 0, color: gradientColors[params.dataIndex][0] },
              { offset: 1, color: gradientColors[params.dataIndex][1] }
            ]
          )
        }
      }
    }]
  }

  chart.setOption(option)
})
</script>

<style scoped>
.test01-container {
  padding: 20px;
}

.chart {
  width: 600px;
  height: 400px;
}
</style>
